<template>
  <div>my-checkbox,my-checkbox-group,my-transfer</div>
  <my-checkbox v-model="checkVal" @change="checkboxChange">abcd</my-checkbox>
  <my-checkbox v-model="checkVal1.a" >efgh</my-checkbox>

{{checkVal2}}
  <my-checkbox-group v-model="checkVal2" @change="checkboxChange">
    <my-checkbox v-for="c in checks" :key="c" :label="c"></my-checkbox>
  </my-checkbox-group>

  <hr>

  <my-transfer v-model="rightValue" :data="transferData" :props="transferProp"></my-transfer>
</template>
<script>
import { defineComponent,reactive,ref } from 'vue';

//组合式api
import { useCheckbox } from './hook/useCheckbox';

function useTransfer(){
  const generateData = _=>{
    const data =[];
    for(let i=1;i<=15;i++){
      data.push({
        key:i,
        label:`备选项${i}`,
        disabled:i%4===0
      })
    }
    return ref(data);
  }
  return {
    transferData:generateData(),
    rightValue:ref([1,4,7]),
    transferProp:{
      key:'key',
      label:'label',
      disabled:'disabled'
    }
  }
}

export default defineComponent({
  setup() {
    return {
      ...useCheckbox(),
      ...useTransfer()
    }
  },
})
</script>
